<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <!-- Add some nice styling and functionality.  We'll just use Twitter Bootstrap -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
        <script src="https://code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
     <style>
        body{padding-top:20px;}
    </style>
<title>Insert title here</title>
</head>
<body>
<!-- 流式布局-->
<div  class="container">
            <div  class="col-xs-6">   
            <!--data-target是我们的模态框的id，data-whatever="@ime"是我们传入模态框的标签和值-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
  打开模态框
</button>
            
            <!-- form-inline类使表单水平呈现-->
<!--水平排列的表单   control-label：表示文本采用右对齐 -->
<form   class="form-horizontal" >
       <div  class="form-group">
         <label  for="inputEmail"   class="col-sm-2  control-label">Email:</label>
          <div  class="col-sm-10">
                  <input  type="email"   class="form-control"   id="inputEmail"  placeholder="email">
          </div>
       </div>
      <div  class="form-group">
         <label  for="inputPassword"   class="col-sm-2  control-label">Password:</label>
          <div  class="col-sm-10">
                  <input  type="password"   class="form-control"   id="inputPassword"  placeholder="password">
          </div>
       </div>
</form>

</div>
   

</div>
<div class="modal " id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true">
  <!--这是小模态框，将modal-sm换成modal-lg是大模态框-->
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!--模态框头部-->
      <div class="modal-header">
        <!--右上角的关闭按钮-->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <!--标题-->
        <div class="modal-title">Modal title</div>
      </div>
      <!--模态框内容-->
      <div class="modal-body">
        <!--模态框内容可以是文字或表格-->
        <!--<p>hello</p>-->
        <form>
          <div class="form-group">
            <label class="control-label">username</label>
            <input class="form-control" type="text">
          </div>
          <div class="form-group">
            <label class="control-label">password</label>
            <input class="form-control" type="password">
          </div>
        </form>
      </div>
      <!--模态框脚部-->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          保存
        </button>
      </div>
    </div>
  </div>
</div>
</body>
</html>